<template>
    <div>
        <Card>
            <div>
                <Row>
					<Col span="6">
						<Form label-position="right" :label-width="100">
							<FormItem label="买入市场:">
								<Select v-model="search.mrsc">
									<Option v-for="(item,key) in mrsclist" :value="item" :key="key">{{item}}</Option>
								</Select>
							</FormItem>
						</Form>
					</Col>
                    <Col span="6">
						<Form label-position="right" :label-width="100">
							<FormItem label="卖出市场:">
								<Select v-model="search.mcsc">
									<Option v-for="(item,key) in mrsclist" :value="item" :key="key">{{item}}</Option>
								</Select>
							</FormItem>
						</Form>
					</Col>
                    <Col span="6">
						<Form label-position="right" :label-width="100">
							<FormItem label="币种:">
								<Select v-model="search.bz">
									<Option v-for="(item,key) in bzlist" :value="item" :key="key">{{item}}</Option>
								</Select>
							</FormItem>
						</Form>
					</Col>
                    <Col span="6">
						<Form label-position="right" :label-width="100">
							<FormItem label="计价货币:">
								<Select v-model="search.jjhb">
									<Option v-for="(item,key) in jjhblist" :value="item" :key="key">{{item}}</Option>
								</Select>
							</FormItem>
						</Form>
					</Col>
                    <Col span="16">
						<Form label-position="right" :label-width="100" inline>
							<FormItem label="显示Top:">
								<Select v-model="search.Top">
									<Option v-for="(item,key) in Toplist" :value="item" :key="key">{{item}}</Option>
								</Select>
							</FormItem>
                            <span style="line-height:35px;">条最大利润对冲组合</span>
						</Form>
					</Col>
					<Col span="8" style="text-align:right;">
						<Button type="primary" style="margin-right:15px;" @click="getDecitionData">查询</Button>
						<Button @click="cancel">重置</Button>
					</Col>
                </Row>

                <div style="margin-top:30px;">
                    <Table border :columns="columns" :data="data"></Table>
                    <Page :total="total" :current="currenPage" style="text-align:right;margin-top:15px;" @on-change="changePage"></Page>
                </div>
            </div>
        </Card>
    </div>
</template>
<script>
import { ipcRenderer } from 'electron';
export default {
    data(){
        return {
            issearch:false,
            currenPage:1,
            total:1,
            jjhblist:['全部','eth','usd','usdt','btc'],
            Toplist:['10','20'],
            mrsclist:['全部','HUOBI', 'BITTREX','GATEIO','OKCOIN','BINANCE'],
            bzlist:['eos','btc'],
            search:{
                mrsc:'',
                mcsc:'',
                bz:'',
                jjhb:'',
                Top:'10'
            },
            columns:[
                {
                    title:'买入市场',
                    key:'mrsc'
                },
                {
                    title:'卖出市场',
                    key:'mcsc'
                },
                {
                    title:'预设利润率',
                    key:'yslrl'
                },
                {
                    title:'盘口利润率',
                    render:(h,params) => {
                        let col = '';
                        if(params.row.pklrl < 0){
                            col = '#ed3f14';
                        }
                        return h('div',[
                            h('span',{
                                style:{
                                    color:col
                                }
                            },params.row.pklrl)
                        ])
                    }
                }
            ],
            data:[]
        }
    },
    created(){
        ipcRenderer.on('decitioninfo',(event,message) => {
			console.log(message)
            this.data = message.data;
            this.total = message.count;
		});
		ipcRenderer.on('searchdecitioninfo',(event,message) => {
			console.log(message)
            this.data = message;
            this.data = message.data;
            this.total = message.count;
		});
		this.getMessage('decitioninfo',{page:this.currenPage});
    },
    methods:{
        getMessage:function(event,type){
			ipcRenderer.send(event,type);
	    },
        getDecitionData(){
            this.issearch = true;
            this.currenPage = 1;
            this.getMessage('searchdecitioninfo',{searchdata:this.search,page:this.currenPage});
        },
        cancel(){
            this.issearch = false;
            this.currenPage = 1;
            this.getMessage('decitioninfo',{page:this.currenPage});
        },
        changePage(page){
            this.currenPage = page;
            if(this.issearch){
                this.getMessage('searchdecitioninfo',{searchdata:this.search,page:this.currenPage});
            }else{
                this.getMessage('decitioninfo',{page:this.currenPage});
            }
        }
    },
    destroyed(){
		ipcRenderer.removeAllListeners('decitioninfo');
		ipcRenderer.removeAllListeners('searchdecitioninfo');
	}
}
</script>
<style scoped>

</style>
